<template>
    <div>
       
        <!-- 头部可左右移动导航 -->
        <div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
						<a class="mui-control-item mui-active" href="#item1mobile" data-wid="tab-top-subpage-1.html">
							推荐
						</a>
						<a class="mui-control-item" href="#item2mobile" data-wid="tab-top-subpage-2.html">
							家具生活
						</a>
						<a class="mui-control-item" href="#item3mobile" data-wid="tab-top-subpage-3.html">
							摄影设计
						</a>
						<a class="mui-control-item" href="#item4mobile" data-wid="tab-top-subpage-4.html">
							明星美女
						</a>
						<a class="mui-control-item" href="#item5mobile" data-wid="tab-top-subpage-5.html">
							空间设计
						</a>
                        <a class="mui-control-item" href="#item5mobile" data-wid="tab-top-subpage-5.html">
							人文艺术
						</a>
                        <a class="mui-control-item" href="#item5mobile" data-wid="tab-top-subpage-5.html">
							斗罗大陆
						</a>
					</div>
				</div>
			</div>


        <!--  图片区域 -->
        <!-- 冷加载技术来加载图片 不过图片是本地的 没有这个效果 -->
        <!-- <ul>
            <li v-for="item in list" :key="item.id">
                <img v-lazy="item">
            </li>
        </ul> -->

          <ul>
            <li>
                <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3534289497,3677101726&fm=27&gp=0.jpg">
            </li>
              <li>
                <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3534289497,3677101726&fm=27&gp=0.jpg">
            </li>
              <li>
                <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3534289497,3677101726&fm=27&gp=0.jpg">
            </li>
              <li>
                <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3534289497,3677101726&fm=27&gp=0.jpg">
            </li>
        </ul>
                    


    </div>
</template>

<script>
    // 导航菜单不能滑动 查看mui官网 需要手动初始化scroll滑动控件
    // 引入mui js文件
    import mui from '../../lib/mui/js/mui.min.js'
    import { Toast } from 'mint-ui'

    export default {
        data(){
            return{
                cates:[],
                // imgs:[] 图片数组
            }
        },
        created(){
            //分类其实是通过接口获取到 这里可以预写加载数据的方法
            // this.getAllCategory()

            // 获取图片数据
            // this.getAllImgs() 
        },
        mounted(){
             mui('.mui-scroll-wrapper').scroll({
                deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
            });
        },
        methods:{
            // getAllCategory(){
            //     this.$http.get("api/getimgcategotry").then(ret=>{
            //         if( ret.body.status ===0 ){
            //             ret.body.message.unshift({title:'全部',id:0})
            //             this.cates = ret.body.message
            //         }
            //     })
            // },

            // 生肖侠接口
            // getAllImgs(){
            //     this.$http.get("").then(ret=>{
            //         if (ret.status === 1 ) {
            //             Toast('获取数！据成功');
            //         }else {
            //             Toast('获取数据失败！')
            //         }
            //     })
            // }

        }
    }

</script>


<style lang="scss" scoped>
    * {
        touch-action: pan-y;
    }

    ul {
        padding: 0;
        li {
            margin-top: 15px;
            list-style: none;
            background-color: #fff;
            text-align: center;
            box-shadow: 0 0 6px #ccc;
        }

        img {
            padding: 10px;
            width: 100%;
            height: 300px;
            margin: auto;
        }
    }
</style>
